import { defineComponent, ref, watch } from 'vue'

// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 定义 ref
    const chartRef = ref()

    const schema = [
      { name: 'date', index: 0, text: '年' },
      { name: 'RANK', index: 1, text: '成绩排名' },
      { name: 'DURATION', index: 2, text: '本科上线率' },
      { name: 'YEARS', index: 3, text: '一本上线率' },

    ];
    const itemStyle = {
      opacity: 1,
      shadowBlur: 0,
      shadowOffsetX: 0,
      shadowOffsetY: 0,
      shadowColor: 'rgba(0,0,0,0.3)'
    };

    // 配置项
    let options = {}

    watch(
      () => props.cdata,
      (val: any) => {
        options = {
          color: ['#ed9140', '#f9d27d', '#56aac5', '#ed4845'],
          legend: {
            top: '2%',
            data: ['七校联考', '全市联考', '全省联考', '全国高考'],
            textStyle: {
              color: '#ffffff',
              fontSize: 16
            }
          },
          title: [
            {
              text: '黄冈高中历届考试成绩关联图',
              left: '4%',
              top: '0%',
              textStyle: {
                color: '#ffffff',
                fontSize: 20,
              }
            }
          ],
          grid: {
            left: '5%',
            right: 150,
            top: '15%',
            bottom: '5%'
          },
          tooltip: {
            backgroundColor: 'rgba(65, 133, 131, 1)',
            borderColor: 'rgba(111, 212, 210, 0.8)',		//tooltip边框颜色
            borderWidth: 2,
            textStyle: {
              color: '#ffffff',
            },
            formatter: function (param) {
              const value = param.value;
              // prettier-ignore
              return '<div style="border-bottom: 2px dotted rgba(111, 212, 210, 0.8); font-size: 16px;padding-bottom: 7px;margin-bottom: 7px">'
                + value[0] + '年' + param.seriesName + ' '
                + '考试成绩排名'
                + '</div>'
                + schema[1].text + '：' + '第' + value[1] + '名' + '<br>'
                + schema[2].text + '：' + value[2] + '%' + '<br>'
                + schema[3].text + '：' + value[3] + '%' + '<br>';
            }
          },


          xAxis: {
            type: 'value',
            min: 1980,
            max: 2021,
            splitNumber: 10,
            axisLabel: {
              formatter: '{value}年',
              align: '',
            },
            nameTextStyle: {
              fontSize: 16,
            },
            splitLine: {
              show: false
            }

          },
          yAxis: {
            type: 'value',
            inverse: true,
            name: '',
            nameGap: 30,
            nameTextStyle: {
              fontSize: 16,
              padding: [-540, 0, 0, -60],
            },
            min: 1,
            max: 20,
            splitNumber: 10,
            axisLabel: {
              formatter: '第 {value} 名',
              align: 'right'
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(39, 57, 75, 0.05)',
                width: 1,
                type: 'solid',
              }
            }
          },
          visualMap: [
            {
              left: 'right',
              top: '20%',
              dimension: 2,
              min: 90,
              max: 100,
              itemWidth: 30,
              itemHeight: 120,
              calculable: true,
              precision: 0.01,
              text: ['圆形大小：本科上线率'],
              textStyle:{
                color:'#ffffff'
              },
              textGap: 20,
              inRange: {
                symbolSize: [0, 70]
              },
              outOfRange: {
                symbolSize: [0, 70],
                color: ['rgba(255,255,255,1)']
              },
              controller: {
                inRange: {
                  color: ['#f9d27d']
                },
                outOfRange: {
                  color: ['#999']
                }
              }
            },
            {
              left: 'right',
              bottom: '10%',
              dimension: 3,
              min: 90,
              max: 100,
              itemHeight: 120,
              calculable: true,
              precision: 0.01,
              text: ['圆形明暗：一本上线率'],
              textStyle:{
                color:'#ffffff'
              },
              textGap: 20,
              inRange: {
                colorLightness: [0.9, 0.5]
              },
              outOfRange: {
                color: ['rgba(255,255,255,0.1)']

              },
              controller: {
                inRange: {
                  color: ['#ed4845']
                },
                outOfRange: {
                  color: ['#999']
                }
              }
            }
          ],
          series: [
            {
              name: '全市联考',
              type: 'scatter',
              itemStyle: itemStyle,
              data: val.dataSJB
            },
            {
              name: '全市联考',
              type: 'line',
              smooth: false,
              //加上不显示圆圈
              symbol: 'circle',
              lineStyle: {
                normal: {
                  color: 'rgba(237, 145, 64, 0.3)',
                  type: 'dotted',
                },
              },

              data: val.dataSJB
            },
            {
              name: '全省联考',
              type: 'scatter',
              itemStyle: itemStyle,

              data: val.dataSJS
            },
            {
              name: '全省联考',
              type: 'line',
              smooth: false,
              //加上不显示圆圈
              symbol: 'circle',
              lineStyle: {
                normal: {
                  color: 'rgba(249, 210, 125, 0.3)',
                  type: 'dotted',
                },
              },

              data: val.dataSJS
            },
            {
              name: '七校联考',
              type: 'scatter',
              itemStyle: itemStyle,
              data: val.dataAYH
            },
            {
              name: '七校联考',
              type: 'line',
              smooth: false,
              //加上不显示圆圈
              symbol: 'circle',
              lineStyle: {
                normal: {
                  color: 'rgba(86, 169, 197, 0.3)',
                  type: 'dotted',
                },
              },

              data: val.dataAYH
            },
            {
              name: '全国高考',
              type: 'scatter',
              itemStyle: itemStyle,
              data: val.dataDJS
            },
            {
              name: '全国高考',
              type: 'line',
              smooth: false,
              //加上不显示圆圈
              symbol: 'circle',
              lineStyle: {
                normal: {
                  color: 'rgba(237, 72, 69, 0.3)',
                  type: 'dotted',
                },
              },

              data: val.dataDJS
            },
          ]
        };
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "520px"
      const width = "100%"

      return <div>
        <echart ref={chartRef} options={options} height={height} width={width} />
      </div>
    }
  }
})

